<template>
  <div v-loading="loading">
    <div class="wel__header">
      <div class="wel__header_left">
<!--        上方左侧-----发起签署----------->
        <div class="wel__header_left_title">
          <span class="title">发起签署</span>
        </div>
        <div class="wel__header_left_content">
          <router-link to="/sign/seal-basic">
            <div class="wel__header_left_content_upload">
              <div class="action"><img src="/img/upload.png" class="start-icon" /><p>发起签署</p></div>
              <p class="des">上传文件进行签署</p>
            </div>
          </router-link>
          <router-link to="/sign/seal-export">
            <div class="wel__header_left_content_chose">
              <div class="action"><img src="/img/search.png" class="start-icon" /><p>使用印章</p></div>
              <p class="des">导出防伪电子印章以自用</p>
            </div>
          </router-link>
        </div>
      </div>
      <!--        上方右侧-----最近签署文件----------->
      <div class="wel__header_right">
        <div class="wel__header_right_title">
          <span class="title2">最近签署的文件</span>
        </div>
        <div>
          <div v-if="signLatelyNum === 0" class="wel__header_right_content">
            <img src="/img/file.png" class="nofile"/>
            <div class="plain">最近30天无签署记录</div>
          </div>
          <div v-else class="recent-template">
            <div v-for="item in signLately" :key="item.uuid" class="template-item" @click="getDetail(item.signId)">
              <el-icon style="color: #c4daff">
                <Document />
              </el-icon>
              <div class="template-title">
                {{item.signFileName}}
              </div>
              <el-icon>
                <ArrowRight></ArrowRight>
              </el-icon>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!--        中间----待我签署----------->
    <div class="wel__extra">
      <div class="wel__extra_title">
        <div class="title">待我签署({{operatedByMeNum}})</div>
      </div>
      <div class="wel__extra_content">
        <div>
          <div v-if="operatedByMeNum === 0" class="wel__header_right_content">
            <img src="/img/file.png" class="nofile"/>
            <div class="plain">没有待我签署的任务</div>
          </div>
          <div v-else>
            <el-divider style="margin-bottom: 0px;"></el-divider>
            <div class="list-item" v-for="item in operatedByMeTable" :key="item.uuid">
              <div class="item-title" @click="getDetail(item.sealSign.signId)">{{item.sealSign.signName}}</div>
              <div class="item-initiator">发起方：{{item.sealSign.signSponsor}}</div>
              <div class="item-initiator">签署截止日期：{{item.sealSign.signDeadline}}</div>
              <div class="button-wrapper"><el-button type="primary" @click="getDetail(item.sealSign.signId)">签署</el-button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--        下方-----我发起的----------->
    <div class="wel__extra">
      <div class="wel__extra_title">
        <div class="title">我发起的</div>
      </div>
      <div class="wel__extra_content">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane :label="'待签署'+'('+operatedByOtherNum+')'" name="first">
            <div>
              <div v-if="operatedByOtherNum === 0" class="wel__header_right_content">
                <img src="/img/file.png" class="nofile"/>
                <div class="plain">没有待签署的任务</div>
              </div>
              <div v-else>
                <div class="list-item" v-for="item in operatedByOtherTable" :key="item.uuid">
                  <div class="item-title" @click="getDetail(item.signId)">{{item.signName}}</div>
                  <div class="item-initiator">发起方：{{item.signSponsor}}</div>
                  <div class="item-initiator">签署截止日期：{{item.signDeadline}}</div>
                  <div class="button-wrapper"><el-button type="primary" @click="getDetail(item.signId)">签署</el-button></div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'草稿'+'('+draftNum+')'" name="third">
            <div>
              <div v-if="draftNum === 0" class="wel__header_right_content">
                <img src="/img/file.png" class="nofile"/>
                <div class="plain">没有草稿</div>
              </div>
              <div v-else>
                <div class="list-item" v-for="item in draftTable" :key="item.uuid">
                  <div class="item-title" @click="goToDraft(item.signId)">{{item.signName}}</div>
                  <div class="button-wrapper"><el-button type="primary" @click="goToDraft(item.signId)">编辑</el-button></div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

    </div>
  </div>

</template>

<script setup>
import {ref,getCurrentInstance} from 'vue';
import {ElMessage} from 'element-plus';
import {
  getSealSignByStatusApi,
  getSealSignLatelyApi,
  getSealSignNumByStatusApi,
  getSealSignNumOperatedByMeApi,
  getSealSignOperatedByMeApi,
} from '../../api/sign';
import {useStore} from 'vuex';
import {compareDate, dateFormat, getNowFormatDate} from '../../utils/util';
const {proxy} = getCurrentInstance()

const activeName = ref('first')

const loading = ref(false)
/**
 * 上传文件前校验
 */
const beforeUpload = (file) => {
  if(file.type !== "application/pdf"){
    ElMessage.error("请上传pdf格式的文件！")
    return false
  }else if (file.size / 1024 / 1024 > 10) {
    ElMessage.error('上传文件大小不能超过10MB!')
    return false
  }
  return true
}
/**
 * 上传pdf至阿里云oss
 */
const handleUpload = (req) => {
  loading.value = true
  const keyName = req.file.uid+"."+req.file.name.split(".")[1];
  proxy.$OSS.put(keyName,req.file)
      .then(({res, url, name})=>{
        loading.value = false
        proxy.$router.push({
          path:'/sign/seal-anti',
          query:{
            oss_url: url
          }
        })
  })
  .catch(res=>{
    ElMessage.error(res)
  })
}

const store = useStore()
const signSponsor = store.getters.userId

/************************** 最近签署 **************************/
/**
 * 最近签署的任务数据
 * @type {Ref<UnwrapRef<*[]>>}
 */
const signLately = ref([])
const signLatelyNum = ref(0)
/**
 * 获取最近签署的5个任务
 */
const getSealSignLately = () => {
  getSealSignLatelyApi(signSponsor)
      .then(res=>{
        let data = res.data.result
        // 筛选出30天内签署的任务
        let date30 = getNowFormatDate(new Date(),"-30","-")
        signLately.value = data.filter((currValue)=>{
          for(let i=0;i<currValue.sealSigner.length;i++){
            if(currValue.sealSigner[i].signerId === store.getters.userInfo.username)
              return compareDate(new Date(currValue.sealSigner[i].signerSignTime),date30)
          }
          return null
        })
        signLatelyNum.value = signLately.value.length
      }).catch(res=>{
    ElMessage.error(res)
  })
}
getSealSignLately()

/************************** 待我操作 **************************/
const operatedByMeNum = ref(0)
/**
 * 获取待我操作的签署文件数量
 */
const getSealSignNumOperatedByMe = () => {
  getSealSignNumOperatedByMeApi(signSponsor)
      .then(res=>{
        let data = res.data.result
        operatedByMeNum.value = data
      })
}
getSealSignNumOperatedByMe()



/**
 * 获取待我签署的文件
 */
const operatedByMeTable = ref([])
const getSealSignOperatedByMe = () => {
  getSealSignOperatedByMeApi(0,5,signSponsor)
  .then(res=>{
    let data = res.data.result
    for (let i=0;i<data.length;i++){
      data[i].sealSign.signDeadline = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data[i].sealSign.signDeadline))
    }
    operatedByMeTable.value = data
    }).catch(res=>{
      ElMessage.error(res)
   })
}
getSealSignOperatedByMe()

/************************** 待签署 **************************/
const operatedByOtherNum = ref(0)
/**
 * 获取待他人操作的文件数量
 */
const getOperatedByOtherNum = () => {
  getSealSignNumByStatusApi(signSponsor,3)
      .then(res=>{
        let data = res.data.result
        operatedByOtherNum.value = data
      })
}
getOperatedByOtherNum()

const operatedByOtherTable = ref([])
/**
 * 获取待他人操作的文件
 */
const getOperatedByOther = () => {
  getSealSignByStatusApi(0,5,signSponsor,3)
  .then(res=>{
    let data = res.data.result
    for (let i=0;i<data.length;i++){
      data[i].signDeadline = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data[i].signDeadline))
    }
    operatedByOtherTable.value = data
    }).catch(res=>{
      ElMessage.error(res)
   })
}
getOperatedByOther()

/************************** 草稿 **************************/
/**
 * 获取草稿数量
 */
const draftNum = ref(0)
const getDraftNum = () => {
  getSealSignNumByStatusApi(signSponsor,0)
      .then(res=>{
        let data = res.data.result
        draftNum.value = data
      })
}
getDraftNum()

/**
 * 获取草稿文件
 */
const draftTable = ref([])
const getDraft = () => {
  getSealSignByStatusApi(0,5,signSponsor,0)
  .then(res=>{
    let data = res.data.result
    draftTable.value = data
    }).catch(res=>{
      ElMessage.error(res)
   })
}
getDraft()

/**
 * 跳转到签署文件的详情页
 * @param signId
 */
const getDetail = (signId) => {
  proxy.$router.push({
    path:'/sign/seal-anti',
    query:{
      signId: signId
    }
  })
}

/**
 * 跳转到签署文件的详情页
 * @param signId
 */
const goToDraft = (signId) => {
  proxy.$router.push({
    path:'/sign/seal-basic',
    query:{
      signId: signId
    }
  })
}
</script>

<style scoped="scoped" lang="scss">
.wel {
  &__header {
    margin: 20px 20px;
    padding: 40px 50px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &_left{
      width: 500px;
      height: 230px;
      &_title{
        height: 20px;
        line-height: 20px;
      }
      &_content{
        width: 200px;
        margin-top: 40px;
        margin-left: 100px;
        &_upload{
          width: 200px;
          height: 60px;
          margin-bottom: 20px;
          border-radius:5px;
          background: linear-gradient(90deg ,#2f6eff,#0043db);
        }
        &_chose{
          width: 200px;
          height: 60px;
          border-radius:5px;
          background: linear-gradient(89.96deg,#23bdff .03%,#0091e3 99.96%);
        }
      }

    }
    &_right{
      width: 800px;
      height: 230px;
      &_title{
        height: 20px;
        line-height: 20px;
      }
      &_content{
        margin-top: 60px;
      }
    }
  }
  &__extra{
    margin: 20px 20px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    align-items: center;
    padding: 40px 50px;
      &_title{
        width: 100%;
        height: 20px;
        line-height: 20px;
      }
    &_content{
      height: 300px;
      margin-top: 20px;
    }

  }
}
.title{
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
}
.start-icon{
  width: 20px;
  height: 18px;
}
.action{
  width: 45%;
  padding-top: 10px;
  text-align:center;
  color: white;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  margin: 0 auto;
  img{
    margin-top: 3px;
  }
  p{
    margin: 0;
  }
}
.des{
  text-align:center;
  color: white;
  font-size: 12px;
  line-height: 17px;
  margin-top: 2px;
}
.title2{
  color: #999;
  font-size: 14px;
  padding: 0 12px;
}
.plain{
  color: #999;
  margin-top: 16px;
  text-align:center;
}
.nofile{
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.recent-template{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #333;
  margin-top: 4px;
  margin-left: 12px;
}
.recent-template .template-item:hover{
  color: #2d60e8;
}
.recent-template .template-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 8px 24px 8px 0;
  cursor: pointer;
}
.recent-template .template-item .template-title{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  margin-right: 16px;
  line-height: 20px;
}
.list-item:hover{
  background-color: #f7f9fa;
}
.list-item{
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 54px;
  color: #333;
  line-height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: inset 0 -1px 0 #f2f3f5;
  box-shadow: inset 0 -1px 0 #f2f3f5;
  padding: 0 16px;
}
.item-title:hover{
  color: #2d60e8;
}
.item-title{
  -webkit-box-flex: 1.6;
  -ms-flex: 1.6;
  flex: 1.6;
  min-width: 100px;
  margin-right: 24px;
  cursor: pointer;
}
.item-initiator{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 120px;
  line-height: 17px;
  font-size: 12px;
}
.button-wrapper{
  margin-left: 3%;
}
.list-item .button-wrapper .el-button{
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 4px 16px;
  background: #1063f1;
  border-radius: 2px;
  cursor: pointer;
  border: none;
}
.list-item .button-wrapper .el-button:hover{
  background: #4a7df2;
}
</style>
